<template>
  <div class="Login">
    <Row>
      <!-- 标题 -->
      <Col span="24" class="titleset">
      <Divider>
        <h1>帐号登录</h1>
      </Divider>
      </Col>
      <!-- 登录框 -->
      <Col span="24" style="margin-bottom: 20px;margin-left: 410px;margin-top:50px">
      <Card style="width:320px">
        <div style="text-align:center">
          <RadioGroup v-model="loginstyle" style="margin-bottom: 20px;">
            <Radio label='输入邮箱'>
              <span>邮箱登录</span>
            </Radio>
            <Radio label='输入手机' disabled>
              <span>手机登录</span>
            </Radio>
          </RadioGroup>
          <Input prefix="ios-contact" :placeholder='loginstyle' style="width: 210px;margin-bottom: 20px;" size="large" v-model="email"
            autofocus />
          <Input prefix="ios-medical" placeholder="输入密码" style="width: 210px;margin-bottom: 20px;" @on-enter='btnActionLogin' size="large"
            type="password" v-model="password" />
          <Button style="width: 210px;margin-bottom: 20px;" type="primary" @click="btnActionLogin" long>登录</Button>
          <Button style="width: 210px" type="warning" @click="btnActionForget" long>忘记密码</Button>
        </div>
      </Card>
      </Col>
    </Row>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        //单选框的值
        loginstyle: "输入邮箱",

        //接口
        url: {
          login: this.$Global.url.login
        },

        //登录邮箱
        email: "",

        //登录密码
        password: ""
      };
    },

    methods: {

      /**
       * 登录
       */
      btnActionLogin() {
        this.$http
          .post(this.url.login, {
            email: this.email,
            password: this.password
          })
          .then(res => {
            if (res.status == 200) {
              var success = res.data.success;
              if (success) {
                this.$Message.success(res.data.message);
                var token = res.data.account.token;
                var name = res.data.account.name;
                this.$store.commit("login", token);
                this.$store.commit("userName", name);
                this.$router.push({ name: "home" });
              } else {
                console.log("error");
                this.$Message.error(res.data.message);
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },


      /**
       * 进入忘记密码界面
       */
      btnActionForget() {
        this.$router.push({ name: "Forget" });
      }
    },

    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.login = this.$Global.url.baseUrl + this.$Global.url.login;
      }
    }
  };
</script>


<style>
  .inputset {
    margin-bottom: 20px;
  }
</style>